TW.Runtime.Widgets.hikvision= function () {
	var valueElem;
	var thisWidget = this;
	this.renderHtml = function () {
		// return any HTML you want rendered for your widget
		// If you want it to change depending on properties that the user
		// has set, you can use this.getProperty(propertyName). In
		// this example, we'll just return static HTML
		var ProtocolType = thisWidget.getProperty('ProtocolType');
		var Width = thisWidget.getProperty('Width');
		var Height = thisWidget.getProperty('Height');
		var szIP = thisWidget.getProperty('IP');
		var szPort = thisWidget.getProperty('Port');
		var szUsername = thisWidget.getProperty('UserName');
		var szPassword = thisWidget.getProperty('Password');
		var iStreamType = thisWidget.getProperty('IStreamType');
		var iChannelID = thisWidget.getProperty('IChannelID');
		var WVCWidth=400;
		var WVCHeight=300;
		if(Width==400 && Height==300){
			Width=$(window).width();
			Height=$(window).height();
			WVCWidth=Width-250;
			WVCHeight=Height -10;
		}else{
			 WVCWidth=Width-250;
			 WVCHeight=Height -10;
		}

		
//		var IProtocol=1;
//		var windWidth=$(window).width();
//		var windHeight=$(window).height();
//		var WVCWidth=windWidth-250;
//		var WVCHeight=windHeight -10;
//		var szIP='192.168.80.64';
//    	var szPort='80';
//    	var szUsername='admin';
//    	var szPassword='BPlead2017';
//    	var iStreamType=1;
//    	var iChannelID=1;
		return 	'<iframe frameborder=0 width='+Width+' height='+Height+' marginheight=0 marginwidth=0 scrolling=no src="../Common/extensions/ThingXExts/ui/hikvision/HKCamera/cn/demo.html?IProtocol='+ProtocolType+'&WVCWidth='+WVCWidth+'&WVCHeight='+WVCHeight+'&szIP='+szIP+'&szPort='+szPort+'&szUsername='+szUsername+'&szPassword='+szPassword+'&iStreamType='+iStreamType+'&iChannelID='+iChannelID+'"></iframe>';
	};

	this.afterRender = function () {
		// NOTE: this.jqElement is the jquery reference to your html dom element
		// that was returned in renderHtml()

		// get a reference to the value element
		valueElem = this.jqElement.find('.hikvision-property');
		// update that DOM element based on the property value that the user set
		// in the mashup builder
		valueElem.text(this.getProperty('Hikvision Property'));
	};

	// this is called on your widget anytime bound data changes
	this.updateProperty = function (updatePropertyInfo) {
		// TargetProperty tells you which of your bound properties changed
		if (updatePropertyInfo.TargetProperty === 'Hikvision Property') {
			valueElem.text(updatePropertyInfo.SinglePropertyValue);
			this.setProperty('Hikvision Property', updatePropertyInfo.SinglePropertyValue);
		}
	};
};